<page-header></page-header>
<nz-card >

  <nz-table
  #rowSelectionTable
  nzShowSizeChanger
  [nzData]="listOfAllData"
  (nzCurrentPageDataChange)="currentPageDataChange($event)"
  nz-col nzSpan="12"
>
  <thead >
    <tr>
      <th
        nzShowCheckbox
        nzShowRowSelection
        [nzSelections]="listOfSelection"
        [(nzChecked)]="isAllDisplayDataChecked"
        [nzIndeterminate]="isIndeterminate"
        (nzCheckedChange)="checkAll($event)"
      ></th>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody >
    <tr *ngFor="let data of rowSelectionTable.data">
      <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
      <td>{{ data.name }}</td>
      <td>{{ data.age }}</td>
      <td>{{ data.address }}</td>
    </tr>
  </tbody>
</nz-table>

<div style="float:left;margin-top: 10px;width: 2px;height: 600px; background: darkgray;"></div> 

<nz-table
  #rowSelectionTable
  nzShowSizeChanger
  [nzData]="listOfAllData"
  (nzCurrentPageDataChange)="currentPageDataChange($event)"
  nz-col nzSpan="11"
>
  <thead >
    <tr>
      <th
        nzShowCheckbox
        nzShowRowSelection
        [nzSelections]="listOfSelection"
        [(nzChecked)]="isAllDisplayDataChecked"
        [nzIndeterminate]="isIndeterminate"
        (nzCheckedChange)="checkAll($event)"
      ></th>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody >
    <tr *ngFor="let data of rowSelectionTable.data">
      <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
      <td>{{ data.name }}</td>
      <td>{{ data.age }}</td>
      <td>{{ data.address }}</td>
    </tr>
  </tbody>
</nz-table>

</nz-card>